<template>
  <div class="coupon">
    <h5>
      <span>商户结算设置</span>
      <span class="add my-background" style="margin: 0 20px" @click="addClick">新增</span>
    </h5>
    <div class="tabs">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="业务类型">
          <template slot-scope="scope">
            <span v-if="scope.row.ordertype == 1" type="text">商超</span>
            <span v-else-if="scope.row.ordertype == 2" type="text">酒店预定</span>
            <span v-else-if="scope.row.ordertype == 3" type="text">直播带货</span>
            <span v-else-if="scope.row.ordertype == 4" type="text">短信VIP充值</span>
            <span v-else-if="scope.row.ordertype == 6" type="text">外卖</span>
            <span v-else-if="scope.row.ordertype == 7" type="text">突突到家</span>
            <span v-else-if="scope.row.ordertype == 8" type="text">电商</span>
          </template>
        </el-table-column>
        <el-table-column prop="style" label="分账方式"></el-table-column>
        <el-table-column prop="settlementcycle" label="分账时长（天）"></el-table-column>
        <el-table-column prop="exetime" label="分账执行时间"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span type="text">{{scope.row.status==1?'启用':'禁用'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="examineClick(scope.row)" type="text">修改</el-button>
            <el-button v-if="true" @click="disable(scope.row)" type="text">{{scope.row.status==1?'禁用':'启用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>
    <!-- 弹窗 -->
    <div class="mask" v-show="masknum">
      <div class="content">
        <p style="font-size: 20px;margin-bottom:10px;">增加商家结算</p>
        <p style="font-size: 12px;color:#888;">按月：建议每月15日执行上月分账，分账执行时间在9：00-19：00内设置一个时间点</p>
        <p style="font-size: 12px;color:#888;">按订单：订单交易后执行分账时间需大于等于3个工作日，分账执行时间在9：00-19：00内设置一个时间点</p>
        <div class="item-content">
          <div class="options-list">
            <div class="item">
              <span class="item-text">业务类型：</span>
              <el-select v-model="examineData.ordertype" placeholder="请选择">
                <el-option
                  v-for="item in searchoptions1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="item">
              <span class="item-text">分账方式：</span>
              <el-select v-model="examineData.style" placeholder="请选择">
                <el-option
                  v-for="item in searchoptions2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="item input-box input-box2" v-if="examineData.style==0">
              <span class="item-text">分账时长：</span>
              订单交易完成后，第
              <el-input v-model="examineData.settlementcycle" placeholder=">=3"></el-input>
              个工作日进行分账，分账执行时间
              <el-time-select  v-model="examineData.exetime"  placeholder="选择时间"></el-time-select>
            </div>
            <div class="item input-box input-box2" v-else>
              <span class="item-text">分账时长：</span>
              每月
              <el-input v-model="examineData.settlementcycle"></el-input>
              日执行上月分账，遇节假日顺延至工作日，分账执行时间
              <el-input v-model="examineData.exetime"></el-input>。
            </div>
          </div>
          <div class="my-top">
            <el-button type="primary" plain @click="addNewClick">确定</el-button>
            <el-button type="info" plain @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="mask" v-show="masknum2">
      <div class="content">
        <p style="font-size: 20px;margin-bottom:10px;">修改商家结算时限</p>
        <p style="font-size: 12px;color:#888;">按月：建议每月15日执行上月分账，分账执行时间在9：00-19：00内设置一个时间点</p>
        <p style="font-size: 12px;color:#888;">按订单：订单交易后执行分账时间需大于等于3个工作日，分账执行时间在9：00-19：00内设置一个时间点</p>
        <div class="item-content">
          <div class="options-list">
            <div class="item">
              <span class="item-text">业务类型：</span>
              <span>外卖</span>
            </div>
          </div>
          <div>
            <div class="item input-box input-box2">
              <span class="item-text">分账时长：</span>
              订单交易完成后，第
              <el-input v-model="input" placeholder="请输入内容"></el-input>
              个工作日进行分账，分账执行时间
              <el-input v-model="input" placeholder="请输入内容"></el-input>。
            </div>
          </div>
          <div class="my-top">
            <el-button type="primary" plain>确定</el-button>
            <el-button type="info" plain @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        baseurl:'',
        masknum: false, //弹窗控制参数
        masknum2: false, //弹窗控制参数
        examineData: {//弹窗数据-修改/新增
          ordertype:'',//业务类型
          style:'',//分账方式
          settlementcycle:'',//分账时长
          exetime:'',//分账执行时间
        },
        tableData: [],
        searchoptions1:[//业务类型
            { id: "1", name: "商超" },
            { id: "2", name: "酒店预定" },
            { id: "3", name: "直播带货" },
            { id: "4", name: "短信VIP充值" },
            { id: "6", name: "外卖" },
            { id: "7", name: "突突到家" },
            { id: "8", name: "电商" },
        ],
        searchoptions2: [//分账方式
            { id: "0", name: "按月" },
            { id: "1", name: "按订单" }
        ],
        //分页
        limit: 5,
        page: 1,
        total: 0,
        currentPage: 1,
    };
  },
  mounted() {
    this.baseurl=this.$store.state.baseurlfz
    this.getCoupon();
  },
  methods: {
    //获取优惠券列表
    getCoupon() {
      this.axios({
        url: this.baseurl +"/settlement/getSettlementList?limit="+this.limit+'&page='+this.page,
        method: "get",
      }).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records;
          console.log('sgfsgsd',this.tableData)
          this.total = res.data.data.total;
        } else {
          alert(res.data.errmsg);
        }
      });
    },
    //新增
    addClick(){
      var data=this.examineData
      this.axios({
        url:'/settlement/addSettlement',
        method:'post',
        data:data,
      }).then(res=>{
        if(res.data.code == 200){
          this.$message('修改成功');
        }
      })
      this.masknum=false
    },
    //新增提交
    addNewClick(){

    },
    //修改
    examineClick(row) {
      this.masknum2 = true;
      this.searchoptions1.forEach(e=>{
        if(row.ordertype==e.id){
          row.ordertype=e.name
        }
      })
      this.examineData.settlementcycle=row.settlementcycle;
      this.examineData.exetime=row.exetime;
    },
    //启用-禁用
    disable(row){
      var status=0
      if(row.status==0){status=1}
      var data={
        id:row.id,
        status:status
      }
      this.axios({
        url:'/settlement/modifySettlement',
        method:'post',
        data:data,
      }).then(res=>{
        if(res.data.code == 200){
          this.$message('修改成功');
        }
      })
    },
    // 取消
    cancel() {
      this.masknum = false;
      this.examineData = "";
    },
    //分页
    handleSizeChange(val) {
      this.limit = val;
      this.getCoupon();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCoupon();
    },
    //处理时间戳
    format(shijianchuo) {
      var time = new Date(shijianchuo * 1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var f = time.getMinutes();
      var s = time.getSeconds();
      //想要什么格式可以自己改
      // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
      return y + "-" + m + "-" + d + " " + this.add0(h) + ":" + this.add0(f);
    },
    //小于10的时候，前边加0（08：08：12）
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
  },
  watch: {
  },
};
</script>

<style scoped>
.coupon > h5 {
  display: flex;
  justify-content: space-between;
}
.coupon>h5 .add{
    display: inline-block;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    padding: 10px 12px;
}
.coupon-header {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* 搜索input框 */
.search-inp {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.search-inp .item {
  /* width: 330px; */
  margin-bottom: 6px;
  display: flex;
}
.search-inp .item-text {
  width: 88px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
}
.search-inp input{
    width: 200px;
}
.button-box{
    margin-top: 20px;
    margin-left:20px;
}
.tabs {
    margin-top: 40px;
    padding-left: 20px;
}

/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  font-size: 14px;
}
.content {
  width: 700px;
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  padding: 30px;
}
.item-content {
  margin-top: 10px;
}
.options-list{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.my-top{
  margin-top: 20px;
  text-align: center;
}
</style>
<style>
.el-date-editor .el-range-separator {
  width: 10% !important;
}
.search-inp .el-input__inner{
    width: 200px;
}
.el-pagination{
    margin-top: 20px;
    text-align: right;
}
.input-box2 .el-input{
  height: 38px;
  width: 70px;
  margin: 0 2px;
}
.input-box2 .el-date-editor.el-input,.input-box2 .el-date-editor.el-input__inner{
  width: 100px;
}
.input-box2 .el-input--suffix .el-input__inner {
    padding-right: 0px;
}
</style>
